import Popup from '../../popup/popup';
import { useState, useEffect } from "react";
import emitter from "../../../utils/event"
import "./prizeListPopup.css";
function PrizeListPopup(props) {
    const [show, setShow] = useState(false);
    const onClickClosePrizeListPop = () => {
        setShow(false);
    }
    useEffect(() => {
        const openListener = emitter.addListener('openPrizeListPopup', (msg, data) => {
            setShow(true);
        })
        return () => {
            emitter.removeListener(openListener)
        }
    }, [])
    return (
        <Popup show={show}>
            <div className="pop-prize-list-box">
                <div className="pop-prize-list-main">
                    <div className="pop-prize-list-header">
                        <span className="pop-prize-header__title">
                            获奖列表
                        </span>
                        <span className="pop-prize-header__closebtn" onClick={onClickClosePrizeListPop} >
                            <i className="byte-icon byte-icon--close iconfont icon-close">
                            </i>
                        </span>
                    </div>
                    <div className="pop-prize-list--body">
                        <div className="prize-table--header">
                            <div>序号</div>
                            <div>图片</div>
                            <div>名称</div>
                            <div>状态</div>
                        </div>
                        {
                            props.prizeList.map((item, index) => {
                                return (
                                    <div className="prize-table--data" key={index}>
                                        <div>{index}</div>
                                        <div><img src={item.image} alt="" /></div>
                                        <div>{item.text}</div>
                                        <div>{item.isReceived ? "已领取" : "未领取"}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        </Popup>
    );
}
export default PrizeListPopup;